---
title: Type Systems
---

<div class="refills-type-systems">

  <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky">
    <%= partial "svgs/menu_icon" %>
  </a>
  <div class="js-menu-screen-refills refills-menu-screen"></div>

  <%= partial "refills-hero" %>
  <%= partial "refills-menu" %>

  <div id="example">
  
    <div id="type-systems">

      <section class="refill">
        <div class="refills-wrapper">
          <div class="line-behind-text"><h6>Geometric</h6></div>
          <div class="refill-smaller">
            <div class="refill-centering"><%= partial "type_system_geometric" %></div>
          </div>
          <div class="refill-snippet"><%= code_for("type_system_geometric") %></div>
        </div>
      </section>

      <section class="refill">
        <div class="refills-wrapper">
          <div class="line-behind-text"><h6>Rounded Sans Serif</h6></div>
          <div class="refill-smaller">
            <div class="refill-centering"><%= partial "type_system_rounded" %></div>
          </div>
          <div class="refill-snippet"><%= code_for("type_system_rounded") %></div>
        </div>
      </section>

      <section class="refill">
        <div class="refills-wrapper">
          <div class="line-behind-text"><h6>Sans Serif</h6></div>
          <div class="refill-smaller">
            <div class="refill-centering"><%= partial "type_system_sans" %></div>
          </div>
          <div class="refill-snippet"><%= code_for("type_system_sans") %></div>
        </div>
      </section>

      <section class="refill">
        <div class="refills-wrapper">
          <div class="line-behind-text"><h6>Serif</h6></div>
          <div class="refill-smaller">
            <div class="refill-centering"><%= partial "type_system_serif" %></div>
          </div>
          <div class="refill-snippet"><%= code_for("type_system_serif") %></div>
        </div>
      </section>
      
      <section class="refill">
        <div class="refills-wrapper">
          <div class="line-behind-text"><h6>Slab Serif</h6></div>
          <div class="refill-smaller">
            <div class="refill-centering"><%= partial "type_system_slab" %></div>
          </div>
          <div class="refill-snippet"><%= code_for("type_system_slab") %></div>
        </div>
      </section>

      <section class="refill">
        <div class="refills-wrapper">
          <div class="line-behind-text"><h6>Traditional</h6></div>
          <div class="refill-smaller">
            <div class="refill-centering"><%= partial "type_system_traditional" %></div>
          </div>
          <div class="refill-snippet"><%= code_for("type_system_traditional") %></div>
        </div>   
      </section>
       
    </div>
  </div>
</div>

<%= partial "refills-page-scripts" %>
